<template>
    <van-dropdown-menu>
        <!-- 分类 -->
      <van-dropdown-item
        v-model="value1"
        :title="value1"
        @open="openSort"
        @close="closeSort"
      >
        <TreeSelect :treeSelectList="treeSelectList" @updateSort="updateSort" />
      </van-dropdown-item>

      <!-- 排序 -->
      <van-dropdown-item title="排序">
        <SortItem :sortList="sortList" @newSort="newSort" />
      </van-dropdown-item>

      <!-- 筛选 -->
      <van-dropdown-item title="筛选">
        <FilterStore :filterList="filterList" @submit="submit" />
      </van-dropdown-item>
    </van-dropdown-menu>
</template>

<script setup>
import { onMounted, ref, defineEmits } from 'vue'
import { useRoute } from 'vue-router'
import { getFilter, getSort, getTreeSelect } from '@/api/food'
import TreeSelect from '@/components/tree-select.vue'
import SortItem from './sort-item.vue'
import FilterStore from './filter-store.vue'

const emit = defineEmits(['isNewSort'])

// 分类下拉菜单
const route = useRoute()
const value1 = ref(route.query.title)
// 获取下拉菜单数据
const treeSelectList = ref([])
const openSort = () => {
  value1.value = '分类'
}
const closeSort = () => {
  if (value1.value === '分类') {
    value1.value = route.query.title
  }
}
onMounted(async () => {
  const res = await getTreeSelect()
  treeSelectList.value = res
})
const updateSort = name => {
  value1.value = name
  document.querySelector('html').click()
}

// 排序下拉菜单
const sortList = ref([])
onMounted(async () => {
  sortList.value = await getSort()
})

const newSort = (item) => {
  document.querySelector('html').click()
  emit('isNewSort', item.name)
}

// 筛选下拉菜单
const filterList = ref([])
onMounted(async () => {
  filterList.value = await getFilter()
})
const submit = () => {
  document.querySelector('html').click()
  console.log(1)
}

</script>

<style scoped lang="less">
:deep(.van-dropdown-menu__bar) {
  position: fixed;
  top: 90px;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 80px;
}

:deep(.van-dropdown-item__content) {
    .van-tree-select__content {
        flex: 1;
    }
    .van-sidebar-item--select::before {
        content: none;
    }
}
</style>
